<template>
	<div class="order">		
    <tab
    	class="tab"
    	active-color = "#FF659B"
    	custom-bar-width = "2rem"
    	>
      <tab-item :selected="!status" @on-item-click="onItemClick()">全部订单</tab-item>
      <tab-item :selected="status == 2" @on-item-click="onItemClick(2)">待发货</tab-item>
      <tab-item :selected="status == 3" @on-item-click="onItemClick(3)">已发货</tab-item>
    </tab>
		<div class="order-list" v-for="(item, index) in orderArr" :key="index" @click="router({path: 'orderDetails', query: {id: item.id}})">
			<div class="top">
				<p class="time">{{item.create_time | formatDate}}</p>
				<p class="status" v-if="item.status == 2">待发货</p>
				<p class="status" v-if="item.status == 3">已发货</p>
			</div>
			<div class="goods">
				<div class="img">
					<img :src="item.img">
				</div>
				<div class="title">
					<p class="tip">{{item.title}}</p>
					<p class="price">¥{{item.price}}</p>
				</div>
				<div class="num">x{{item.buy_num}}</div>
			</div>
			<div class="bottom">
				<p>总计金额： ￥{{item.should_pay}}</p>
			</div>
		</div>
	</div>
</template>

<script>
import { Tab, TabItem  } from 'vux'
import { order, baseUrl } from '@/api/api'
import { formatDate } from '@/util/date.js'
export default {
	filters:{
    formatDate(time){
      let date = new Date(time*1000);
      return formatDate(date,'yyyy.MM.dd');
      //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
    }
	},
  components: {
  	Tab, 
  	TabItem
  },
  data () {
    return {
    	orderArr: [],
    	status: '',
    }
  },
  created () {
  	this.status = this.$route.query.status
  	this.orders()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    onItemClick (index) {
    	this.orderArr = []
    	this.status = index
    	this.orders() 
    },
    orders () {
    	var jsonData = {
    		status: this.status,
    	}
    	order(jsonData).then((res) => {
    		this.orderArr = res.data.info
    	}).catch((err) => {
    		console.log(err)
    	})
    }
  }
}
</script>
<style lang="stylus" scoped>
.order
	background-color #f2f2f2
	min-width 100vw
	min-height 100vh
	.tab
		margin-bottom 1rem
	.order-list
		background-color #fff
		margin-bottom 1rem
		.top
			line-height 4.5rem
			height 4.5rem
			overflow hidden
			padding 0 1.5rem
			display flex
			p
				flex 1
			.time
				font-size 1.5rem
				color #999
			.status
				font-size 1.5rem
				color #ff659b
				text-align right
		.goods
			display flex
			background-color #fff
			margin-bottom 1rem
			padding 2rem 0
			margin 0 1.5rem
			border-top 1px solid #e5e5e5
			border-bottom 1px solid #e5e5e5
			.img
				width 10rem
				height 7.5rem
				margin-right 1.4rem
				img
					width 100%;
					height 100%;
					display block
			.title
				position relative
				max-width 17.5rem
				min-width 17.5rem
				.tip
					font-size 1.5rem
					color #333
					font-weight 500
				.price
					color #FF659B
					font-size 1.3rem
					line-height 1.6rem
					position absolute
					bottom 0px
			.num
				flex 1
				text-align right
				line-height 2.1rem
				font-size 1.5rem
				font-weight 500
		.bottom
			line-height 4.5rem
			color #333
			font-size 1.5rem
			padding 0 1.5rem
</style>